﻿@{ 
    Layout = null;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>【@ViewBag.name】的二维码</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
    <script src="https://res2.wx.qq.com/open/js/jweixin-1.4.0.js" type="text/javascript"></script>
    <script type="text/javascript">
        wx.config({
            debug: false,
            appId: '@ViewBag.appid',
            timestamp: @ViewBag.ts,
            nonceStr: '@ViewBag.noncestr',
            signature: '@ViewBag.signature',
            jsApiList: [
              'onMenuShareTimeline',
              'onMenuShareAppMessage'
            ]
        });
        wx.ready(function () {
            wx.onMenuShareAppMessage({
                title: '【@ViewBag.name】邀您来注册。',
                desc: '好事情就要一起分享！@ViewBag.company',
                link: '@ViewBag.shareUrl',
                imgUrl: '@ViewBag.imgUrl',
                trigger: function (res) {
                    // 不要尝试在trigger中使用ajax异步请求修改本次分享的内容，因为客户端分享操作是一个同步操作，这时候使用ajax的回包会还没有返回
                    alert('用户点击发送给朋友');
                },
                success: function (res) {
                    alert('已分享');
                },
                cancel: function (res) {
                    alert('已取消');
                },
                fail: function (res) {
                    alert(JSON.stringify(res));
                }
            });
            wx.onMenuShareTimeline({
               title: '【@ViewBag.name】邀您来注册。',
                desc: '好事情就要一起分享！@ViewBag.company',
                link: '@ViewBag.shareUrl',
                imgUrl: '@ViewBag.imgUrl',
                trigger: function (res) {
                    // 不要尝试在trigger中使用ajax异步请求修改本次分享的内容，因为客户端分享操作是一个同步操作，这时候使用ajax的回包会还没有返回
                    alert('用户点击分享到朋友圈');
                },
                success: function (res) {
                    alert('已分享');
                },
                cancel: function (res) {
                    alert('已取消');
                },
                fail: function (res) {
                    alert(JSON.stringify(res));
                }
            });
            wx.onMenuShareWeibo({
               title: '【@ViewBag.name】邀您来注册。',
                desc: '好事情就要一起分享！@ViewBag.company',
                link: '@ViewBag.shareUrl',
                imgUrl: '@ViewBag.imgUrl',
                success: function (res) {
                    alert('已分享');
                },
                cancel: function (res) {
                    alert('已取消');
                }
            });
        });
        wx.error(function (res) {
            alert(res.errMsg);
        });
    </script>
    <!-- Link Swiper's CSS -->
    <link rel="stylesheet" href="/share/css/swiper.min.css">

    <!-- Demo styles -->
    <style>
        html, body {
            position: relative;
            height: 100%;
        }

        body {
            background-color: rgb(163, 163, 163);
            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
            font-size: 14px;
            color: #000;
            margin: 0;
            padding: 0;
        }

        .swiper-container {
            width: 100%;
            height: 90%;
            position: relative;
            margin-top: 5%;
        }

        .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #fff;
            /* Center slide text vertically */
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
            width: 90%;
        }

            .swiper-slide img {
                display: block;
            }

        .slide-image {
            width: 100%;
            height: 100%;
            border-radius: .15rem;
        }

        .acea-row.row-between-wrapper, .acea-row.row-center-wrapper {
            -webkit-box-align: center;
            -o-box-align: center;
            -ms-flex-align: center;
            align-items: center;
        }

        .acea-row.row-center-wrapper {
            -webkit-box-pack: center;
            -o-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
        }

        .preserve {
            color: #fff;
            text-align: center;
            margin-top: .2rem;
        }

        .acea-row {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-lines: multiple;
            -moz-box-lines: multiple;
            -o-box-lines: multiple;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        }

        .preserve .line {
            width: 1rem;
            height: .01rem;
            background-color: #fff;
        }

        .preserve .tip {
            margin: 0 .3rem;
        }
    </style>
</head>
<body>
    <!-- Swiper -->
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img src="/qrcode/index?username=@ViewBag.user_name&moban=1&level=60" class="slide-image" />
            </div>
            <div class="swiper-slide">
                <img src="/qrcode/index?username=@ViewBag.user_name&moban=2&level=60" class="slide-image" />
            </div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
    </div>
    <div class="preserve acea-row row-center-wrapper"><div class="line"></div><div class="tip">长按保存图片</div><div class="line"></div></div>
    <!-- Swiper JS -->
    <script src="/share/js/swiper.min.js"></script>

    <!-- Initialize Swiper -->
    <script>
	      var swiper = new Swiper('.swiper-container', {
	        slidesPerView: 'auto',
	        centeredSlides: true,
	        spaceBetween: 30,
	        pagination: {
	          //el: '.swiper-pagination',
	          //clickable: true,
	        },
	      });
    </script>
</body>
</html>
